<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>药品管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/back/css/x-admin.css"
	media="all">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/back/css/pag.css" media="all">
<link href="${pageContext.request.contextPath}/back/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/layer/layer.js"></script> 
<script src="${pageContext.request.contextPath}/back/lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>药品管理</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<form class="layui-form x-center" action="" style="width: 85%">
			<div class="layui-form-pane">
				<div class="layui-form-item">

					<div class="layui-input-inline" style="width: 200px">
						<input type="text" name="link" placeholder="搜索" autocomplete="off"
							class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<button class="layui-btn" lay-submit="" lay-filter="*">搜索</button>
					</div>
				</div>
			</div>
		</form>
		<div class="tools">
			<ul class="toolbar">
				<li><span><img
						src="${pageContext.request.contextPath}/back/images/t03.png" /></span>批量删除</li>
				<li
					onclick="change()" data-toggle="modal" ><span><img
						src="${pageContext.request.contextPath}/back/images/t01.png" /></span>添加</li>
			</ul>
			<span class="x-right" style="line-height: 25px">共有药品：<span
				id="count"></span> 种
			</span>
		</div>
		</div>
		<table class="tablelist">
			<thead>
				<tr>
					<th><input onclick="selectAll()" type="checkbox"
						name="controlAll" style="" id="controlAll"></th>
					<th>编号</th>
					<th>药品名称</th>
					<th>药品种类</th>
					<th>药品库存数量</th>
					<th>药品单价</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!-- 判断是否为空数据 -->
				<c:if test="${medicine==null}">
					<jsp:forward page="../medicine"></jsp:forward>
				</c:if>
				<div id="demo20"></div>
				<c:forEach items="${medicine}" var="medicine">
					<tr id="listMedicine">
						<td><input onclick="selectAll()" type="checkbox"
							name="controlAll" style="" id="controlAll"></td>
						<td>${medicine.medicineid}</td>
						<td>${medicine.medicinename}</td>
						<td>${medicine.medicinetype}</td>
						<td>${medicine.medicinenum}</td>
						<td>${medicine.medicineprice}</td>
						<td class="td-manage"><a title="编辑"  
							onclick="changeUpd(this)"
							class="ml-5" style="text-decoration: none"> <i
								class="layui-icon">&#xe642;</i>
						</a> <a title="删除" href="javascript:;" class="delMedicine"
							style="text-decoration: none"> <i class="layui-icon">&#xe640;</i>
						</a></td>
					</tr>

				</c:forEach>
			</tbody>
		</table>
		<div id="pageDiv" style="text-align: center"></div>
		<!-- layui分页开始 -->
		<!-- <div  id="pageDiv"  style="text-align:  center"></div> -->
		<!-- layui分页结束 -->
		<!-- <div class="page" v-show="show">
			<div class="pagelist">
				<span class="jump">上一页</span> <span class="jump">1</span> <span
					class="jump">2</span> <span class="jump">3</span> <span
					class="jump">4</span> <span class="jump">5</span> <span
					class="jump">6</span> <span class="ellipsis">...</span> <span
					class="jump">下一页</span> <span class="jumppoint">跳转到：</span> <span
					class="jumpinp"> <input type="text">
				</span> <span class="jump gobtn">GO</span>
			</div>
		</div> -->
			<!-- 这里放我们的修改遮罩层 -->
	<div class="row clearfix">
			<div class="col-md-12 column">
				<div class="modal fade" id="modal-container-534629" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<!-- 通过样式设置层的宽度 -->
					<div class="modal-dialog" style="width: 500px">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-hidden="true">×</button>
								<h4 class="modal-title" id="myModalLabel">修改药品信息</h4>
							</div>
							<!-- 表单开始  action ="url" 一个动态可以接受当前表单数据的地址  xx.php /xx.jsp /xx.action xx.do 某个servlet文件... -->
							<form class="form-horizontal" role="form" >
								<div class="layui-form-item">
									<div class="layui-input-inline">
										<input type="hidden" id="medicineid" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label"> 药品名称 </label>
									<div class="layui-input-inline">
										<input type="text" id="medicinename" name="medicinename" class="layui-input"
											readonly="readonly" >
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label"> 药品类型 </label>
									<div class="layui-input-inline">
										<input type="text" id="medicinetype" name="medicinetype" class="layui-input"
											readonly="readonly" >
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label"> 药品数量 </label>
									<div class="layui-input-inline">
										<input type="text" id="medicinenum" name="medicinenum" class="layui-input" required="required">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label"> 药品价格 </label>
									<div class="layui-input-inline">
										<input type="text" id="medicineprice" name="medicineprice" class="layui-input"
											 required="required">
									</div>
								</div>
								<div class="layui-form-item">
									<button type="button" class="btn btn-default"
										data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary" id="upd">修改</button>
								</div>
							</form>
							<!-- 表单结束 -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 修改遮罩层的结束 -->
		
				<!-- 这里放我们的添加遮罩层 -->
		<div class="row clearfix">
			<div class="col-md-12 column">
				<div class="modal fade" id="modal-container-add" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<!-- 通过样式设置层的宽度 -->
					<div class="modal-dialog" style="width: 500px">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-hidden="true">×</button>
								<h4 class="modal-title" id="myModalLabel">添加药品</h4>
							</div>
							<!-- 表单开始  action ="url" 一个动态可以接受当前表单数据的地址  xx.php /xx.jsp /xx.action xx.do 某个servlet文件... -->
							<form class="form-horizontal" role="form" action="" >
								<div class="layui-form-item">
									<label class="layui-form-label"> 药品名称 </label>
									<div class="layui-input-inline">
										<input type="text" id="medicinenameAdd" class="layui-input" 
										 required="required">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label"> 药品类型 </label>
									<div class="layui-input-inline">
										<!-- <input type="text" id="medicinetypeAdd" class="layui-input"
										 required="required"> -->
										 <select name="medicinetypeAdd" id="medicinetypeAdd" class="layui-input" >
											<option value="感冒">感冒药</option>
											<option value="发烧">发烧药</option>
											<option value="胃">胃药</option>
											<option value="消炎">消炎药</option>
											<option value="保健">保健药</option>
									 	</select>
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label"> 药品数量 </label>
									<div class="layui-input-inline">
										<input type="text" id="medicinenumAdd" class="layui-input"
											 required="required">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label"> 药品价格 </label>
									<div class="layui-input-inline">
										<input type="text" id="medicinepriceAdd" class="layui-input"
											 required="required">
									</div>
								</div>
								<div class="layui-form-item">
									<button type="button" class="btn btn-default"
										data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary" id="add">添加</button>
								</div>
							</form>
							<!--?layui分页开始?-->
							
						<!--?layui分页结束?-->
							<!-- 表单结束 -->
						</div>
						
					</div>
				</div>
			</div>
		</div>
		<!-- 添加遮罩层的结束 -->
		<br /> <br /> <br />
		 <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/layui/css/layui.css" media="all"> 
 		<script src="${pageContext.request.contextPath}/assets/layui/layui.js" charset="utf-8"></script> 
		<script type="text/javascript">
		$(function(){
			  layui.use(['laypage', 'layer'], function(){
				  var laypage = layui.laypage
				  ,layer = layui.layer;
				
				//完整功能
				  laypage.render({
				    elem: 'pageDiv'
				    ,count: ${requestScope.count}
				    ,curr:${requestScope.page}
				   ,limit:10
				    ,layout: ['count', 'prev', 'page','limit','next', 'skip']
				    ,jump: function(obj,first){
				    //首次不执行
				      if(!first){
				    	  $.ajax({
				    		  url:"${pageContext.request.contextPath}/medicinePage/"+obj.curr+"/"+obj.limit,
				    		  type:"get",
				    		  success:function(medicineList){
				    			 		$("tbody").empty();
				    				      //模拟渲染
				    				      var innerHtml="";
				    				     
				    				      $.each(medicineList,function(index,medicine){
				    				    	  innerHtml+="<tr>"+
				    				    	  "<td><input onclick='selectAll()'"+" type='checkbox'"+
			    								"name='controlAll'"+"id='controlAll'></td>"+
			    								"<td>"+medicine.medicineid+"</td>"+
			    								"<td>"+medicine.medicinename+"</td>"+
			    								"<td>"+medicine.medicinetype+"</td>"+
			    								"<td>"+medicine.medicinenum+"</td>"+
			    								"<td>"+medicine.medicineprice+"</td>"+
			    								"<td class='td-manage'><a title='编辑'  onclick='changeUpd(this)' class='ml-5' style='text-decoration: none'> <iclass='layui-icon'>&#xe642;</i></a> <a title='删除' href='javascript:;' class='delMedicine' style='text-decoration: none'> <i class='layui-icon'>&#xe640;</i></a></td>"+
			    								"</tr>";
				    				      })
				    				    	  
				    				      
				    				     $("tbody").html(innerHtml);
				    				    }
				    				  });
				    		  }
				    	  }
				  });
				}); 
		});
		 
	</script> 
	
	
		<script type="text/javascript">
		//添加药品
		function change(){
			$("#modal-container-add").modal("show");
			/* $("#medicinenameAdd").val(medicinenameAdd);
			$("#medicinetypeAdd").val(medicinetypeAdd);
			$("#medicinenumAdd").val(medicinenumAdd);
			$("#medicinepriceAdd").val(medicinepriceAdd); */
			$("#add").click(function() {
						$.ajax({
									url : "${pageContext.request.contextPath}/addMedicine",
									type : "POST", //增加操作  post方法
									contentType : "application/json",
									data : JSON.stringify({
										medicinename : $("#medicinenameAdd").val(),
										medicinetype : $("#medicinetypeAdd").val(),
										medicinenum : $("#medicinenumAdd").val(),
										medicineprice : $("#medicinepriceAdd").val(),
									}),
									success : function(result) {
										console.log(result)
										if (result == true) {
											location.href = "${pageContext.request.contextPath}/medicine"
										}
									}
								});

					});
		}
		
		//layer提示按钮删除医生
		$(function() {
			//ajax删除
			$(".delMedicine")
					.click(function() {
								var medicineId = $(this).parents("tr").find("td").eq(1).text();
								layer.open({
									  content: '确定删除该医生？'
									  , btn: ['确定', '取消'] 
									  ,yes: function(){
									    //按钮【按钮一】的回调
										  $.ajax({
											url : '${pageContext.request.contextPath}/delMedicine/'+medicineId,
											type : 'delete',
											success : function(result) {
												if (result == "success") {
													location.href = "${pageContext.request.contextPath}/medicine";
												}
											}
										});
										  return false;
									  }
									  ,btn2: function(index, layero){
									    //按钮【按钮二】的回调
									     location.reload();
									     //return false; 开启该代码可禁止点击该按钮关闭
									  } 
									  ,cancel: function(){ 
									    //右上角关闭回调
									    
									    //return false 开启该代码可禁止点击该按钮关闭
									  }
									});
								
							});
			//ajax查询所有药品数量
						$.ajax({
									url : '${pageContext.request.contextPath}/countMedicine',
									type : 'GET',
									success : function(result) {
										if (result != null) {
											$("#count").text(result);
										}
									}
								});
		});
		//模态窗修改
		function changeUpd(e){
			$("#modal-container-534629").modal("show");
			var medicineid = $(e).parents("tr").find("td").eq(1).text();
			var medicinename = $(e).parents("tr").find("td").eq(2).text();
			var medicinetype = $(e).parents("tr").find("td").eq(3).text();
			var medicinenum = $(e).parents("tr").find("td").eq(4).text();
			var medicineprice = $(e).parents("tr").find("td").eq(5).text(); 
			
			//alert(medicinename);
			
			$("#medicineid").val(medicineid);
			$("#medicinename").val(medicinename);
			$("#medicinetype").val(medicinetype);
			$("#medicinenum").val(medicinenum);
			$("#medicineprice").val(medicineprice);  
		 	$("#upd").click(function() {
								$.ajax({
											url : "${pageContext.request.contextPath}/updMedicine/"+$("#medicineid").val(),
											type : "PUT", //修改操作  put方法
											contentType : "application/json",
											dataType : "json",
											data : JSON
													.stringify({
														"medicineid" : $("#medicineid").val(),
														"medicinename" : $("#medicinename").val(),
														"medicinetype" : $("#medicinetype").val(),
														"medicinenum" : $("#medicinenum").val(),
														"medicineprice" : $("#medicineprice").val(),
													}),
											success : function(result) {
												if (result) {
													window.location.reload();
												}
											}
										});
							}); 
		}
	</script>
		<%-- <script
			src="${pageContext.request.contextPath}/back/lib/layui/layui.js"
			charset="utf-8"></script>  --%>
		<script src="${pageContext.request.contextPath}/back/js/x-layui.js"
			charset="utf-8"></script>
		<%--<script src="${pageContext.request.contextPath}/back/js/jquery2.js"
			charset="utf-8"></script>
		<script src="${pageContext.request.contextPath}/back/js/js.js"
			charset="utf-8"></script>--%>
		<script>
	/* 	layui.use([ 'laydate', 'element', 'laypage', 'layer' ], function() {
			$ = layui.jquery;//jquery
			lement = layui.element();//面包导航
			laypage = layui.laypage;//分页
			layer = layui.layer;//弹出层

		});  */

		/*用户-添加*/
		function user_management_add(title, url, w, h) {
			x_admin_show(title, url, w, h);
		}
		/*用户-查看*/
		function user_management_show(title, url, id, w, h) {
			x_admin_show(title, url, w, h);
		}

		/*用户-停用*/
		/* function member_stop(obj, id) {
			layer
					.confirm(
							'确认要停用吗？',
							function(index) {
								//发异步把用户状态进行更改
								$(obj)
										.parents("tr")
										.find(".td-manage")
										.prepend(
												'<a style="text-decoration:none" onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="layui-icon">&#xe62f;</i></a>');
								$(obj).parents("tr").find(".td-status").html(
										'<button class="sp3">已停用</button>');
								$(obj).remove();
								layer.msg('已停用!', {
									icon : 5,
									time : 1000
								});
							});
		} */

		/*用户-启用*/
		/* function member_start(obj, id) {
			layer
					.confirm(
							'确认要启用吗？',
							function(index) {
								//发异步把用户状态进行更改
								$(obj)
										.parents("tr")
										.find(".td-manage")
										.prepend(
												'<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="layui-icon">&#xe601;</i></a>');
								$(obj).parents("tr").find(".td-status").html(
										'<button class="sp">已启用</button>');
								$(obj).remove();
								layer.msg('已启用!', {
									icon : 6,
									time : 1000
								});
							});
		} */
		// 用户-编辑
		function user_management_edit(title, url, id, w, h) {
			x_admin_show(title, url, w, h);
		}
		//药品删除
		function medicine_del(title, url, id) {
			x_admin_show(title, url);
		}

		/*密码-修改*/
		function user_management_password(title, url, id, w, h) {
			x_admin_show(title, url, w, h);
		}

		$('.tablelist tbody tr:odd').addClass('odd');
	</script>
		<script>
		/* layui.use(['laypage', 'layer'], function(){
		  var laypage = layui.laypage
		  ,layer = layui.layer;
		  
		//完整功能
		  laypage.render({
		    elem: 'pageDiv'
		    ,count: ${pd.total}
		    ,curr: ${pd.page}
		   ,limit: ${pd.pageSize}
		    ,layout: ['count', 'prev', 'page','limit','next', 'skip']
		    ,jump: function(obj,first){
		      console.log(obj);
		      console.log(first);
		    //首次不执行
		      if(!first){
		        //do something
		       location.href="${pageContext.request.contextPath}/message/list?page="+obj.curr+"&pageSize="+obj.limit+"&keywords="+document.getElementById("keywords").value;
		      }
		    }
		  }); 
		});*/
</script>
</body>
</html>